<template>
  <el-row>
    <el-col :span="24">
      <el-form ref="ruleForm"
               :model="ruleForm"
               :rules="rules"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="合约名称"
                      prop="name">
          <el-input v-model="ruleForm.name"
                    placeholder="请输入合约名称" />
        </el-form-item>
        <el-form-item v-if="!customerType"
                      label="发货方"
                      prop="customerId">
          <nr-select ref="selectRef"
                     v-model="ruleForm.customerId"
                     :options="customerSelect"
                     :props="{ label: 'name', value: 'customerId' }"
                     placeholder="请选择发货方" />
        </el-form-item>
        <el-form-item v-else
                      label="承运方"
                      prop="carrierId">
          <nr-select v-model="ruleForm.carrierId"
                     :options="customerSelect"
                     :props="{ label: 'name', value: 'carrierId' }"
                     placeholder="请选择承运方"
                     @change="$forceUpdate()" />
        </el-form-item>
        <el-form-item label="合约编号"
                      prop="code">
          <el-input v-model="ruleForm.code"
                    placeholder="请输入合约编号" />
        </el-form-item>
        <el-form-item label="合约有效期"
                      prop="contractValidDate">
          <el-date-picker v-model="ruleForm.contractValidDate"
                          :picker-options="pickerOptions"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @input="changeDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitForm('ruleForm')">下一步</el-button>
          <el-button @click="handleCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import nrSelect from "@/components/nr/select/Index";
import { searchCustomer } from "@/api/customer/customer";
import carrier from "@/api/modules/carrier";
import { mapActions } from "vuex";

export default {
  name: "ContractQuotationType",
  components: { nrSelect },
  props: {
    query: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      customerSelect: [],
      ruleForm: {},
      rules: {
        name: [{ required: true, message: '请输入合约名称', trigger: 'blur' }, { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }],
        code: [{ required: true, message: '请输入合约编号', trigger: 'blur' }, { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }],
        customerId: [{ required: true, message: '请选择发货方名称', trigger: 'change' }],
        carrierId: [{ required: true, message: '请选择承运方名称', trigger: 'change' }],
        contractValidDate: [{ required: true, message: '请选择有效日期', trigger: 'change' }]
      },
      pickerOptions: {
        // disabledDate (time) {
        //   return time.getTime() < Date.now() - 8.64e7;
        // }
      }
    };
  },
  computed: {
    customerType () {
      return this.query.customerType
    },
    disableKey () {
      return "hasQuoteAuthority"
    },
  },
  created () {
    this.customerInit()
  },
  methods: {
    ...mapActions({
      routeLink: "link/routeLink"
    }),
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.routers()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    routers () {
      let kwargs = {
        link: 'newQuotation',
        target: '',
        query: { ...this.ruleForm, customerSelect: this.customerSelect }
      }
      this.routeLink(kwargs)
    },
    /** customerType 0发货方 or 1承运方 **/
    async customerInit () {
      let params = { page: 1, size: 10000, statuses: [1, 3], subjectType: 0, type: [0, 1] };
      let paramsCustomer = {
        page: 1,
        size: 10000,
        statuses: [1, 3],
        customerTypes: [0, 1]
      };
      let response =
        this.customerType === 1
          ? await carrier.search(params)
          : await searchCustomer(paramsCustomer);
      let { records } = response.data;
      if (records && records.length) {
        this.customerSelect = records.map(ele => {
          const disabled = !ele?.[this.disableKey];
          const text = disabled
            ? `${this.customerType === 1 ?
              '承运方没有报价权限，不能操作选择' :
              '发方货没有报价权限，不能操作选择'}` :
            '';

          return {
            ...ele,
            disabled,
            text
          };
        });
      }
      // this.customerSelect = records;
    },
    changeDate (value) {
      this.$nextTick(() => {
        this.ruleForm.startTime = value[0] + " 00:00:00";
        this.ruleForm.endTime = value[1] + " 23:59:59";
        this.$set(this.ruleForm, "contractValidDate", [value[0], value[1]])
        this.$forceUpdate();
      })
    },
    handleCancel () {
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped>
.demo-ruleForm >>> .el-input--small {
  width: 270px;
}
.demo-ruleForm >>> .el-range-editor--small {
  width: 270px;
}
</style>
